<template>
	<view class="box">
	    <!-- 选择会员 -->
		<view class="selectMember">
			<view class="member">
				<text style="position: relative;">{{start_date || '选择日期：'}}
					<picker mode="date" :start="start" :end="end"  @change="bindDateChange" v-if="selected != 1" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;"></picker> 
				</text>
			</view>
			<view class="save" @click="showModalbtn(4)" v-if="selected != 1">保存</view>
			<view class="toSend" @click="showModalbtn(2)">申请评估</view>
		</view>
		
		<view class="slidingBlock">
			<view>
				<text class="on"></text>
				<text :class="number == 2 || number == 3 || number == 4 || number == 5 || number == 6 ? 'on' : ''"></text>
				<text :class="number == 3 || number == 4 || number == 5 || number == 6? 'on' : ''"></text>
				<text :class="number == 4 || number == 5 || number == 6? 'on' : ''"></text>
				<text :class="number == 5 || number == 6 ? 'on' : ''"></text>
				<text :class="number == 6 ? 'on' : ''"></text>
			</view>
			<view>{{number}}/6</view>
		</view>
	
	    <view class="content"  @touchstart="touchStart" @touchend="touchEnd">
			<view class="navigator">
				<image :src="'../../../static/img/healthStatus/diet'+number+'@2x.png'"></image>
			</view>
			<view v-for="(item,index) in subjectArr[number-1] && subjectArr[number-1].adTopicsRepliesEntityList" :key="index"> 
				<template v-if="!item.hidden">
					<view class="question">
						<view class="title">
							<text>{{index <= 8 ? '0'+(index+1) : index+1}}</text>
							<view>{{item.name}}</view>
						</view>
						<view class="option" v-for="(aitem,aindex) in item.adTopicsRepliesEntityList" :key="aindex">
							<view v-if="aitem.type != 39">
								<view @click="answer(aitem,item)" class="answer"><text>{{aitem.elections}}、{{aitem.value}}</text>
									<image src="@/static/img/select@2x.png" v-if="aitem.checked == false"></image>  
									<image src="@/static/img/selected@2x.png" v-else></image>
								</view>
							</view>
							<view v-else>
								<view @click="checkboxAnswer(aitem,item)" class="answer"><text>{{aitem.elections}}、{{aitem.value}}</text>
									<image src="@/static/img/select@2x.png" v-if="aitem.checked == false"></image>  
									<image src="@/static/img/selected@2x.png" v-else></image>
								</view>
							</view>
						</view>
					</view>
				</template>		
			</view>
			<view class="tips">右滑进入下一页，左滑进入上一页</view>
	    </view>
		<u-modal v-model="showModal1" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
	</view>
</template>

<script src="@/static/js/monitor/lifeStyle/index"></script>

<style lang="scss" scoped>
	.slidingBlock {
		display: flex;
		align-items: center;
		height: 40upx;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		top: 218upx;
		left: 0;
		padding: 0 24upx;
		box-sizing: border-box;
		view:nth-child(1) {
			flex: 1;
			height: 6upx;
			background: #EAEAEA;
			border-radius: 4upx;
			margin-right: 25upx;
			display: flex;
			text {
				flex: 1;
			}
			.on {
				background: #05C6AD;
				border-radius: 4upx;
			}
		}
		view:nth-child(2) {
			color: #05C6AD;
			font-size: 22upx;
		}
	}	
	@import '@/static/css/monitor/accomplishment/index.scss';
	.content {
		margin-top: 170upx !important;
		.navigator {
			height: 48upx;
			width: 336upx;
			margin: 0 auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.tips {
			color: #666666;
			font-size: 24upx;
			text-align: center;
			margin: 20upx auto;
		}
		.question:first-child{
			margin-top: 10px !important;
		}
	}
</style>
